<template>
    <div>
      <home-header></home-header>
      <home-swiper :list="swiperList"></home-swiper>
      <home-icons :list="iconList"></home-icons>
      <home-recommend :list="recommendList"></home-recommend>
      <home-weekend :list="weekendList"></home-weekend>
    
    </div>
</template>
<script>
import HomeHeader from'./components/Header'
import HomeSwiper from'./components/Swiper'
import HomeIcons from'./components/Icons'
import HomeRecommend from'./components/Recommend'
import HomeWeekend from'./components/Weekend'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
       name:'home',
       components:{
           HomeHeader,
           HomeSwiper,
           HomeIcons,
           HomeRecommend,
           HomeWeekend 
       },
       data() {
         return {
           lastCity:'',
           swiperList:[],
           iconList:[],
           recommendList:[],
           weekendList:[]
         }
       },
       computed: {
         ...mapState(['city'])
       },
       methods: {
         getHomeInfo(){
           axios.get('/api/index.json?city='+this.city).then(this.getHomeSucc)
         },
         getHomeSucc(res){
           res=res.data
           if(res.ret&&res.data){
             const data=res.data
             this.swiperList=data.swiperList
             this.iconList=data.iconList
             this.recommendList=data.recommendList
             this.weekendList=data.weekendList
             console.log(res)
           }
         }
       },
      //  一般ajax请求都在mounted中执行  页面一加载显示内容在 created中执行
       mounted() {
         this.lastCity=this.city
         this.getHomeInfo()
       },
       activated() {
        //  当页面重新被显示的时候，会执行activated钩子函数
       if(this.lastCity !== this.city){
          this.lastCity=this.city
          this.getHomeInfo()
      }
       },
}
</script>
<style scoped>

</style>
